<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品详情 - 简易商城</title>
    <link rel="stylesheet" href="../css/css/style.css">
    <style>
        body { background: #f5f5f5; }
        .product-detail-container {
            max-width: 700px;
            margin: 40px auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px #eee;
            padding: 30px 40px;
            display: flex;
            gap: 40px;
            align-items: flex-start;
        }
        .product-detail-img {
            width: 220px;
            height: 220px;
            object-fit: contain;
            border-radius: 8px;
            background: #fafafa;
            border: 1px solid #eee;
        }
        .product-detail-info {
            flex: 1;
        }
        .product-detail-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 16px;
        }
        .product-detail-desc {
            color: #666;
            margin-bottom: 16px;
        }
        .product-detail-price {
            color: #e4393c;
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 24px;
        }
        .product-detail-btns button, .product-detail-btns a {
            background: #e4393c;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 10px 22px;
            font-size: 16px;
            margin-right: 10px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }
        .product-detail-btns button:hover, .product-detail-btns a:hover {
            background: #b7271e;
        }
        .back-link {
            display: inline-block;
            margin: 30px 0 0 40px;
            color: #888;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="product-detail-container" id="productDetail"></div>
    <a href="../index.html" class="back-link">返回首页</a>
    <script src="../js/utils.js"></script>
    <script src="../js/main.js"></script>
    <script>
        function showProductDetailPage() {
            const params = new URLSearchParams(location.search);
            const id = params.get('id');
            const p = getProductById(id);
            const detail = document.getElementById('productDetail');
            if (!p) {
                detail.innerHTML = '<p style="color:#e4393c;font-size:18px;">商品不存在</p>';
                return;
            }
            detail.innerHTML = `
                <img src="../${p.image}" alt="${p.name}" class="product-detail-img" onerror="this.src='../images/icons/default.png'">
                <div class="product-detail-info">
                    <div class="product-detail-title">${p.name}</div>
                    <div class="product-detail-desc">${p.desc}</div>
                    <div class="product-detail-price">￥${p.price}</div>
                    <div class="product-detail-btns">
                        <button onclick="addToCart(${p.id});alert('已加入购物车');">加入购物车</button>
                        <a href="cart.html">去购物车</a>
                    </div>
                </div>
            `;
        }
        showProductDetailPage();
    </script>
</body>
</html>